Wikibox

This is code for an HTML/CSS wikibox. I made this for myself to show off my own characters, and you can use this too!

This is what it looks like:

Some notes:

• There is no max-width built in, so it'll conform to whatever the width of your website is.
• When you click the title, it expands and closes using the <details> and <summary> HTML tags.
• It should also be mobile responsive, as under 500px it collapses to a vertical column.
• You can add or remove as many characters and subtitles as you want if you know a little HTML editing.
• Feel free to use this for whatever, and edit it as much as you want! It can be for characters, your writing, a list of fruits you enjoy, or anything your heart desires.

If you know how to view source, feel free to just copy/paste the HTML and CSS and put it on your site. Then change the names to match your own characters!

For novices:

1. Copy the HTML and paste it where you want in the page.

   
   <div class="wikibox"><details open>
   						<summary>My OCs Do Not Steal</summary>
   	<div class="split">
                           <div class="subtitle">
                               <p>Subtitle 1</div>
   						<div class="links"><div class="linklist">
   							<a href="#">Character 1</a>
                               <a href="#">Character 2</a>
                               <a href="#">Character 3</a>
   
                           </div>
                           </div>
   	</div>
   
       <div class="split">
                           <div class="subtitle">
                               <p>Subtitle 2 </div>
   						<div class="links"><div class="linklist">
   						    <a href="#">Character 1</a>
                               <a href="#">Character 2</a>
                               <a href="#">Character 3</a>
                           </div>
                           </div>
   	</div>
   
       
       <div class="split">
                           <div class="subtitle">
                               <p>Subtitle 3 </div>
           <div class="categorylist">
                <div class="category">
                                   <div class="subsubtitle">
                               <p>Category 1</div>
   						<div class="links"><div class="linklist">
   						  <a href="#">Character 1</a>
                               <a href="#">Character 2</a>
                               <a href="#">Character 3</a>
                           </div>
                       </div>
                </div>
   
                <div class="category">
                                   <div class="subsubtitle">
                               <p>Category 2</div>
   						<div class="links"><div class="linklist">
   						  <a href="#">Character 1</a>
                               <a href="#">Character 2</a>
                               <a href="#">Character 3</a>
                           </div>
                       </div>
                </div>
   
                <div class="category">
                                   <div class="subsubtitle">
                               <p><a href="https://en.wikipedia.org/wiki/The_Three_Stooges">The Stooges</a></div>
   						<div class="links"><div class="linklist">
   						  <a href="https://en.wikipedia.org/wiki/Curly_Howard">Curly</a>
                               <a href="https://en.wikipedia.org/wiki/Larry_Fine">Larry</a>
                               <a href="https://en.wikipedia.org/wiki/Moe_Howard">Moe</a>
                               <a href="https://en.wikipedia.org/wiki/Shemp_Howard">Shemp</a>
   
                           </div>
                       </div>
                </div>
   
           </div>    
   	</div>
   </div>
   
                </div>
           </div>    
   	</div></div>
   </details>
               

2. The wikibox will appear as an unstyled mess. So let's style it with the magical power of Cascading Style Sheets. Copy the CSS text into notepad (or any text editor). Save it as "wikibox.css", and upload it to your site, preferably in a folder called "css".
3. Copy this link to the CSS inbetween the <head> and </head> section of your HTML.

   
   <link href="/css/wikibox.css" rel="stylesheet" type="text/css" media="all">
                   

4. The infobox now be styled like it is on this page!

If you want to show the same infobox on multiple pages, and edit only one file to add characters, like I'm doing on my characters pages, I advise you use a Static Site Generator like Astro or whatever, or if you don't want to use command lines and shit follow Sadgrl's tutorial on repeating elements like I did LOL.

<--Back to resources